/**
 * 后台确认付款弹窗
 * Add by LG 2024-8-27
 */
<template>
    <kdx-modal-frame v-model="value" :width="430" :closable="false" okText="确认付款" @on-cancel="handleCancel"
                 @on-ok="handleOk">
        <div class="order-list-back-confirm-pay-modal">
          <div class="header">

          </div>
            <div class="back-confirm-pay-box">
                <div class="icon">
                    <Icon type="ios-help-circle"/>
                </div>
                <div class="content">
                    <div class="title">
                        提示
                    </div>

                    <div class="title">
                      确认此订单已付款吗？
                    </div>
                    <div class="text">
                      <p>请填写支付交易单号及管理员密码</p>
                    </div>

                    <div class="input">
                        <Form v-if="value" ref="form" :model="model" :rules="rules" @submit.native.prevent>
                            <FormItem prop="out_trade_no">
                                <Input type="textarea" v-model="model.out_trade_no" autofocus maxlength="50" show-word-limit placeholder="请输入支付交易单号"/>
                            </FormItem>
                          <kdx-hint-text>为了防止误确认，请输入管理员密码进行操作</kdx-hint-text>
                            <FormItem prop="password">
                                <Input v-model="model.password" :type="showPassword? 'password' : 'text'"
                                       :icon="showPassword? ' iconfont icon-eye-off': ' iconfont icon-eye'"
                                       placeholder="请输入管理员密码"
                                       class="width-350" @on-click="passwordClick" />
                            </FormItem>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    </kdx-modal-frame>
</template>

<script>
    export default {
        name: "index",
        props: {
            id: {
                type: [String, Number],
                required: true
            }
        },
        data() {
            return {
                realPayPrice: 0,
                model: {
                    password: '',
                    /* 外部支付交易单号 */
                    out_trade_no: ''
                },
                rules: {
                    out_trade_no: [
                      {required: true, message: '支付交易单号必填'}
                    ],
                    password: [
                        {required: true, message: '管理员密码必填'}
                    ]
                },
                value: false,
                showPassword: true,
                loading: false,
            };
        },
        methods: {
            setValue() {
                this.value = true;
                if (this.value) {
                    this.model.password = '';
                }
            },
            handleCancel() {
                this.value = false;
                this.model.out_trade_no = '';
            },
            handleOk() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        let params = {
                            order_id: this.id,
                            password: this.model.password,
                            out_trade_no: this.model.out_trade_no
                        };
                        if(this.loading ) return;
                        this.loading = true;
                        // 进行确认付款操作
                        this.$api.orderApi.setPayment(params).then(res => {
                            if (res.error === 0) {
                                this.$Message.success('确认付款操作成功');
                                this.value = false;
                                this.model.out_trade_no = '';
                                this.$emit('on-refresh');
                            }
                        }).finally(()=> {
                            this.loading = false
                        });
                    }
                });
            },
            passwordClick() {
                this.showPassword = !this.showPassword;
            },
        }
    };
</script>

<style scoped lang="scss">
    .order-list-back-confirm-pay-modal {
        padding: 32px 20px 26px;

        .back-confirm-pay-box {
            display: flex;
            .icon {
                font-size: 24px;
                color: $warning-color;
                padding-right: 10px;
                ::v-deep .ivu-icon {
                    vertical-align: super;
                }
            }
            .content {
                .title {
                    @include font-16-22-bold;
                    color: $text-first;
                    padding: 1px;
                }
                .text {
                    @include font-14-20;
                    padding: 10px 0;
                }
                .ivu-form-item {
                    margin-bottom: 9px !important;
                }
            }
        }
    }
</style>
